<template>
  <div class="app-container xjjl">
    <el-card class="margin-top-15">
      <el-descriptions title="基本信息" :column="3" border>
        <el-descriptions-item label="巡检时间" labelClassName="labelmy" contentClassName="labelmy">
          {{ detailsInfo.inspectionTime }}
        </el-descriptions-item>
        <el-descriptions-item label="巡检场所" labelClassName="labelmy" contentClassName="labelmy">
          {{ detailsInfo.placeName }}
        </el-descriptions-item>
        <el-descriptions-item label="巡检房源" labelClassName="labelmy" contentClassName="labelmy">
          {{ detailsInfo.roomName }}
        </el-descriptions-item>
        <el-descriptions-item label="巡检部门" labelClassName="labelmy" contentClassName="labelmy">
          {{ detailsInfo.department }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card class="margin-top-15">
      <el-descriptions title="房间问题" :column="3" border>
        <el-descriptions-item label="问题" labelClassName="labelmy" contentClassName="labelmy">
          {{ detailsInfo.roomProblem }}
        </el-descriptions-item>
        <el-descriptions-item label="附件" labelClassName="labelmy" contentClassName="labelmy">
          <img class="cus-avator" v-for="item in detailsInfo.inspFiles" :key="item.id" :src="'/api'+item.filename" alt="" srcset="">
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card class="margin-top-15">
      <el-descriptions title="挂牌信息" :column="3" border>
        <el-descriptions-item label="挂牌类型" labelClassName="labelmy" contentClassName="labelmy">
          {{ detailsInfo.cardType }}
        </el-descriptions-item>
        <el-descriptions-item label="挂牌细则" labelClassName="labelmy" contentClassName="labelmy">
          {{ detailsInfo.cardItem }}
        </el-descriptions-item>
        <el-descriptions-item label="状态" labelClassName="labelmy" contentClassName="labelmy">
          {{ detailsInfo.cardStatus }}
        </el-descriptions-item>
        <el-descriptions-item label="备注" labelClassName="labelmy" contentClassName="labelmy">
          {{ detailsInfo.cardBz }}
        </el-descriptions-item>
        <el-descriptions-item label="整改开始时间" labelClassName="labelmy" contentClassName="labelmy">
          {{ detailsInfo.rectStartTime }}
        </el-descriptions-item>
        <el-descriptions-item label="整改结束时间" labelClassName="labelmy" contentClassName="labelmy">
          {{ detailsInfo.rectEndTime }}
        </el-descriptions-item>
        <el-descriptions-item label="整改情况" labelClassName="labelmy" contentClassName="labelmy">
          {{ detailsInfo.rectQk }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card class="margin-top-15">
      <el-descriptions title="加扣分记录" :column="3" border></el-descriptions>
      <el-table v-loading="loading" :data="scoreList">
        <el-table-column label="打分类型" align="center" prop="scoreType" />
        <el-table-column label="打分项" align="center" prop="scoreItem" />
        <el-table-column label="打分说明" align="center" prop="scoreRemark" />
        <el-table-column label="分值" align="center" prop="score" />
      </el-table>
    </el-card>
    <!-- <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    /> -->
  </div>
</template>

<script>
import { listScore } from '@/api/ptsj/score';
import { getInspection } from '@/api/ptsj/inspection';
import { mapState } from 'vuex';
export default {
  // name: 'eventDetails',
  dicts: ['ptsj_dept_list'],
  data() {
    return {
      loading:true,
      detailsInfo: {},
      id: '',
      scoreList:[]
    }
  },
  computed: {
    ...mapState(['user']),
    deptName() {
      let { deptName } = this.user;
      return deptName
    }
  },
  created() {
    console.log(this.$route.query.id);
    if(this.$route.query.id) {
      this.id = this.$route.query.id;
      // this.queryParams.placeCode = this.$route.query.placeCode;
      this.getInspection()
    }
  },
  methods: {
    async getInspection() {
      await getInspection(this.$route.query.id).then(res => {
        try {
          
          if(res.code == 200) {
            this.detailsInfo = res.data.data.inspection;
            console.log(this.detailsInfo)
            this.scoreList = res.data.data.scoreRecords
            this.loading=false
          }
        } catch {}
      })
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.margin-top-15 {
  margin-top: 15px;
  margin-bottom: 50px;
}
.cus-avator {
  display: inline-block;
  width: 80px;
  height: 80px;
  margin-right: 8px;
  border-radius: 4px;
}
.labelmy{
  width: 16%;
}
</style>

<style scoped>
.xjjl >>> .el-descriptions__title {
  font-weight: normal;
  border-left: 4px solid rgb(110, 172, 238);
  padding-left: 15px;
}
</style>